<template>
  <div class="templateFormMake-container fm-style">
    <el-container class="fm2-container">
      <asideComsConfig :categoryFieldList="categoryFieldList" v-show="!isView"></asideComsConfig>
      <el-container height="auto">
        <el-header class="btn-bar" height="38px">
          <el-button type="text" size="medium" icon="el-icon-view" @click="handlePreview" v-show="isFromWord">预览</el-button>
          <el-button type="text" size="medium" icon="el-icon-check" @click="handleShowRule">字段校验规则</el-button>
        </el-header>
        <el-main class="dragMainBox" ref="dragMainBox" :style="{'height': dragMainBoxHeight + 'px'}">
          <widgetForm ref="widgetForm" :select.sync="widgetFormSelect" v-if="isFromWord" :data="widgetForm"></widgetForm>
          <widgetFormNoWord ref="widgetForm" :data="widgetForm"
                            v-else
                            :select.sync="widgetFormSelect"></widgetFormNoWord>
          <!--查看时遮盖，不给编辑-->
          <div class="coverBox" v-show="isView"></div>
        </el-main>
      </el-container>
      <el-aside class="widget-config-container" width="280px" v-show="!isView">
        <el-header height="38px">字段属性</el-header>
        <WidgetConfig :data="widgetFormSelect" :isShowFieldName="isFromWord == 0"></WidgetConfig>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
  import asideComsConfig from './asideComsConfig'
  import WidgetConfig from './WidgetConfig'
  import widgetForm from './widgetForm'
  import widgetFormNoWord from './widgetFormNoWord'
  export default {
    name: 'templateFormMake',
    components: {
      asideComsConfig,
      widgetForm,
      WidgetConfig,
      widgetFormNoWord,
    },
    props: {
      isFromWord: {
        type: [Number, String],
        default: 1
      },
      fieldData: {
        type: Object,
        default: () => ({
          list: [],
          tables: []
        })
      },
      categoryFieldList: {
        type: Array,
        default: () => ([])
      },
      isView: { // 查看状态，则不可编辑
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        widgetFormSelect: {},
        widgetForm: {
          list: [],
          tables: []
        },
        dragMainBoxHeight: 700,
        isPreviewWordDiaShow: false,
        dragMainBoxTop: 0
      }
    },
    methods: {
      initDragMainHeight () {
        const bodyHeight = document.body.offsetHeight
        const dragMainBox = this.$refs.dragMainBox.$el
        this.dragMainBoxHeight = bodyHeight - 210 - 80
      },
      handlePreview () {
        this.$emit('preview')
      },
      handleShowRule () {
        this.$emit('showRule')
      },
      setFieldsWidth () {

      },
      getFieldData (val) {
        return this.$refs.widgetForm.data
      }
    },
    watch: {
      fieldData: {
        deep: true,
        handler (val) {
          if (!val) {
            this.widgetForm = {
              list: [],
              tables: []
            }
          } else {
            this.widgetForm = JSON.parse(JSON.stringify(val))
          }
        }
      }
    }
  }
</script>

<style lang="scss">
  .templateFormMake-container {
    .fm2-container {
      min-height: 590px;
      .el-container {
        height: auto!important;
      }
      .dragMainBox {
        padding: 10px;
        background-color: #f4f6f9;
        height: 100%;
        position: relative;
      }
      .widget_form_container {
        background-color: #fff;
        box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
        height: calc(100% - 0px);
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 10px;
        }
        &::-webkit-scrollbar-track {
          background-color: #e4e4e4;
          border-radius: 100px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #bbb;
          border-radius: 100px;
        }
        &::-webkit-scrollbar-thumb:hover {
          background-color: #aaa;
        }
      }
    }
    .components-list {
      padding: 0;
    }
    .btn-bar {
      text-align: right;
      border-bottom: 1px solid #ddd;
    }
    .components-list .form-edit-widget-label{
      float: none;
      width: auto;
      a{
        display: flex;
        align-items: center;
        padding:  0 5px;
      }
      a:active, a:hover {
        text-decoration: none;
        outline: 0;
      }
    }
    .components-list ul {
      padding-left: 0;
    }
    .el-collapse-item__content{
      padding-bottom: 0;
    }
    .widget-config-container {
      border-left: 1px solid #ddd;
      line-height: 38px;
      .el-header {
        text-align: center;
      }
    }

    .el-input.is-disabled .el-input__inner {
      background-color: #fff;
    }

    .coverBox {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }
  }
</style>
